<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    .player_con {
        border-radius: 50%;
        width: 200px;
        height: 200px;
    }

    .player_con img {
        width: 200px;
        height: 200px;
        border-radius: 50%;
    }

    .turn {
        animation: rotating 10s linear infinite;
        -moz-animation: rotating 10s linear infinite;
        /* Firefox */
        -webkit-animation: rotating 10s linear infinite;
        /* Safari and Chrome */
        -o-animation: rotating 10s linear infinite;
        /* Opera */
    }

    .pauseturn{
        animation-play-state: paused;
        -o-animation-play-state: paused;
        -webkit-animation-play-state: paused;
        -moz-animation-play-state: paused;
    }

    @keyframes rotating {
        from {
            transform: rotate(0)
        }

        to {
            transform: rotate(360deg)
        }
    }

    @-moz-keyframes rotating {
        from {
            -moz-transform: rotate(0)
        }

        to {
            -moz-transform: rotate(360deg)
        }
    }

    @-webkit-keyframes rotating {
        from {
            -webkit-transform: rotate(0)
        }

        to {
            -webkit-transform: rotate(360deg)
        }
    }

    @-o-keyframes rotating {
        from {
            -o-transform: rotate(0)
        }

        to {
            -o-transform: rotate(360deg)
        }
    }

    .video_con{
        width: 100%;
        height: 100%;
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        margin:0 auto;
     }

    .video_con video{
        width: 600px;
        height: 400px;
    }

    .mask{
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        background-color: black;
        opacity: 0.8;
        z-index: -1;
    }

</style>

<body>
    <div id="app">
        <div>
            <input type="text" placeholder="请输入要查询的城市" v-model="query" @keyup.enter="searchMusic">
            <button>查询</button>
        </div>
        <ul>
            <li v-for='item in musicList'>
                <a href="javascript:;" @click='playMusic(item.id)'>播放</a>
               <b>{{item.name}}</b> 
               <span v-if="item.mvid!=0"><a href="javascript:;" @click='palyMv(item.mvid)'>mv</a></span>
            </li>

        </ul>
        <div>
            <audio :src="musicUrl" @play="play" @pause="pause" controls autoplay loop></audio>
        </div>

        <div class="player_con turn" :class="{pauseturn:!isPlaying}">
            <img width="200px" height="200px" :src="musicPicUrl" alt="">
        </div>
        <div>
            <dl v-for="item in hotComments">
                <dt><img width="40" height="40" :src="item.user.avatarUrl" alt=""></dt>
                <dd>{{item.user.nickname}}</dd>
                <dd>{{item.content}}</dd>
            </dl>
        </div>

        <div class="video_con" v-show="isShow" @click="isShow=false">
            <video :src="mvUrl" controls="controls" v-if="isShow"></video>
            <div class="mask" @click="isShow=false"></div>
            
        </div>
    </div>

    <script type="text/javascript" src="./vue.min.js"></script>
    <script type="text/javascript" src="./axios.min.js"></script>
    <script type="text/javascript" src="./main.js"></script>
</body>

</html>